<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>LinkedList</title>
    <style>
        div{
            margin-top:10px;
        }
        html {
            font-size:12px;
        }
    </style>
</head>
<body>
<div>
    <input type="button" value="init" id="initBtn">
</div>
<div>
    <label for="key">key </label><input type="text" id="key" placeholder="请输入value 以,分隔">
    <label for="index">index </label><input type="text" id="index" placeholder="-1 表示尾添加" value="-1">
</div>
<div>
    <input type="button" value="add" id="addBtn">
    <input type="button" value="remove" id="removeBtn">
    <input type="button" value="clear" id="clearBtn">

</div>
<div id="canvasDiv">
    <canvas id="canvas" width="1024" height="400"></canvas>
</div>
<script>
    document.getElementById("initBtn").onclick = function(){
        let url = `http://localhost:8080/linkedlist/init`;
        fetch(url).then(r=>r.json()).then(json=>{
            loadData();
        });
    }
    document.getElementById("clearBtn").onclick = function(){
        let url = `http://localhost:8080/linkedlist/clear`;
        fetch(url).then(r=>r.json()).then(json=>{
            loadData();
        });
    }
    document.getElementById("removeBtn").onclick = function(){
        let key = document.getElementById("key").value;
        let url = `http://localhost:8080/linkedlist/remove?key=${key}`;
        fetch(url).then(r=>r.json()).then(json=>{
            loadData();
        });
    }
    document.getElementById("addBtn").onclick = function(){
        let key = document.getElementById("key").value;
        let index = document.getElementById("index").value;
        let url = `http://localhost:8080/linkedlist/add?key=${key}&index=${index}`;
        fetch(url).then(r=>r.json()).then(json=>{
            loadData();
        });
    }

    function drawList(first,bWidth,bHeight,xBegin,yBegin) {
        let e = first;
        let i = 0;
        ctx.font = "bold 12px Arial";
        while(e){
            let x = xBegin + i*(bWidth + 80);
            let y = yBegin + bHeight;
            ctx.fillStyle="yellow";
            ctx.fillRect(x,yBegin,bWidth,bHeight);
            ctx.fillStyle="black";
            ctx.fillText("p",x+6,y-4);

            y = y+2;
            ctx.fillStyle="blue";
            ctx.fillRect(x,y,bWidth,bHeight);
            ctx.fillStyle="white";
            ctx.fillText(e.item,x+6,y+12);

            if(e.next) {
                ctx.fillStyle = "black";
                Plot.arrowCoord({x:x+bWidth+80,y:y-bHeight/2},{x:x+bWidth,y:y+bHeight/2});
                Plot.sideCoord();
                Plot.drawArrow();
            }

            y = y+2 + bHeight;
            ctx.fillStyle="red";
            ctx.fillRect(x,y,bWidth,bHeight);
            ctx.fillStyle="white";
            ctx.fillText("n",x+6,y+12);

            ctx.fillStyle = "black";
            Plot.arrowCoord({x:x+bWidth,y:y+bHeight/2}, {x:x+bWidth+80,y:y-bHeight/2});
            Plot.sideCoord();
            Plot.drawArrow();

            e = e.next;
            i++;
        }
    }
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");

    function loadData() {
        fetch("http://localhost:8080/linkedlist/all").then(r=>r.json()).then(data=>{
            canvas.width = 1024;
            drawList(data.all, 20,15,0,0);
            /*const heightUnit = 100;

            canvas.width = data.all.length * (18 + 2);
            let details = data.details;
            if(details) {
                canvas.height = 300+(details.length)*heightUnit;
            }
            if(details) {
                for(let i = 0; i < details.length; i++) {
                    let d = details[i];
                    drawList(d, 18,15,0,100+(i+1)*heightUnit);
                }
            }*/
        });
    }
    loadData();

    let polygonVertex = [],
    CONST = {
        edgeLen: 50,
        angle: 20
    };
    //封装的作图对象
    var Plot = {

       angle: "",

       //在CONST中定义的edgeLen以及angle参数
       //短距离画箭头的时候会出现箭头头部过大，修改：
       dynArrowSize: function() {
           var x = stopPoint.x - beginPoint.x,
               y = stopPoint.y - beginPoint.y,
               length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
           if (length < 250) {
               CONST.edgeLen = CONST.edgeLen/2;
               CONST.angle = CONST.angle/2;
           }
           else if(length<500){
               CONST.edgeLen=CONST.edgeLen*length/500;
               CONST.angle=CONST.angle*length/500;
           }
           // console.log(length);
       },

       //getRadian 返回以起点与X轴之间的夹角角度值
       getRadian: function(beginPoint, stopPoint) {
           Plot.angle = Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) / Math.PI * 180;
           //console.log(Plot.angle);
           paraDef(20,15);
           Plot.dynArrowSize();
       },

       ///获得箭头底边两个点
       arrowCoord: function(beginPoint, stopPoint) {
           polygonVertex[0] = beginPoint.x;
           polygonVertex[1] = beginPoint.y;
           polygonVertex[6] = stopPoint.x;
           polygonVertex[7] = stopPoint.y;
           Plot.getRadian(beginPoint, stopPoint);
           polygonVertex[8] = stopPoint.x - CONST.edgeLen * Math.cos(Math.PI / 180 * (Plot.angle + CONST.angle));
           polygonVertex[9] = stopPoint.y - CONST.edgeLen * Math.sin(Math.PI / 180 * (Plot.angle + CONST.angle));
           polygonVertex[4] = stopPoint.x - CONST.edgeLen * Math.cos(Math.PI / 180 * (Plot.angle - CONST.angle));
           polygonVertex[5] = stopPoint.y - CONST.edgeLen * Math.sin(Math.PI / 180 * (Plot.angle - CONST.angle));
       },

       //获取另两个底边侧面点
       sideCoord: function() {
           var midpoint = {};
           // midpoint.x = polygonVertex[6] - (CONST.edgeLen * Math.cos(Plot.angle * Math.PI / 180));
           // midpoint.y = polygonVertex[7] - (CONST.edgeLen * Math.sin(Plot.angle * Math.PI / 180));
           midpoint.x=(polygonVertex[4]+polygonVertex[8])/2;
           midpoint.y=(polygonVertex[5]+polygonVertex[9])/2;
           polygonVertex[2] = (polygonVertex[4] + midpoint.x) / 2;
           polygonVertex[3] = (polygonVertex[5] + midpoint.y) / 2;
           polygonVertex[10] = (polygonVertex[8] + midpoint.x) / 2;
           polygonVertex[11] = (polygonVertex[9] + midpoint.y) / 2;
       },

       //画箭头
       drawArrow: function() {
           ctx.beginPath();
           ctx.moveTo(polygonVertex[0], polygonVertex[1]);
           ctx.lineTo(polygonVertex[2], polygonVertex[3]);
           ctx.lineTo(polygonVertex[4], polygonVertex[5]);
           ctx.lineTo(polygonVertex[6], polygonVertex[7]);
           ctx.lineTo(polygonVertex[8], polygonVertex[9]);
           ctx.lineTo(polygonVertex[10], polygonVertex[11]);
           // ctx.lineTo(polygonVertex[0], polygonVertex[1]);
           ctx.closePath();
           ctx.fill();
       }
    };
    var beginPoint = {}, stopPoint = {};
    function paraDef(edgeLen, angle) {
        CONST.edgeLen = edgeLen;
        CONST.angle = angle;
    }
</script>
</body>
</html>